<template>
	<view class="containerPage">
		<!-- 三个按钮 -->
		<view class="sort-nav  fixed-top">
			<view class="nav-box">
				<view class="nav-item" :class="{activeNav:navIndex==-1}" @click="changeNav(-1)">
					<view>兑换记录</view>
				</view>
				<view class="nav-item" :class="{activeNav:navIndex==0}" @click="changeNav(0)">
					<view>
						中奖订单
					</view>
				</view>
				<view class="nav-item" :class="{activeNav:navIndex==1}" @click="changeNav(1)">
					<view>抽奖记录</view>
				</view>
			</view>

			<view class="order_titleBox " v-if="navIndex!=1">
				<view class="order_titleItem">
					<view>订单信息</view>
					<view>单价（现金/积分）</view>
					<view>数量</view>
					<view>交易状态</view>
				</view>
			</view>
		</view>
		<view style="height: 70rpx;"></view>
		<!-- 订单的相关数据 -->
		<view class="order_titleBox " v-if="navIndex!=1">
			<view class="order_titleItem">
				<view>订单信息</view>
				<view>单价（现金/积分）</view>
				<view>数量</view>
				<view>交易状态</view>
			</view>
		</view>

		<!-- nav(-1) -->
		<view class="order_box1" v-if="navIndex===-1">
			<my-redeem :currentNum='currentNum' @exchangetotal='exchangetotal'></my-redeem>
		</view>

		<!-- nav(0) -->
		<view v-if="navIndex===0" class="order_itemBox">
			<my-winner :currentNum='currentNum' @exchangetotal='exchangetotal'></my-winner>
		</view>
		<!-- nav(1) -->
		<view v-if="navIndex=== 1" class="order_itemBox">
			<my-draw :currentNum='currentNum' @exchangetotal='exchangetotal'></my-draw>
		</view>

	</view>
</template>

<script>
	import MyDraw from '../../components/mydraw/mydraw.vue'
	import MyRedeem from '../../components/myredeem/myredeem.vue'
	import MyWinner from '../../components/mywinner/mywinner.vue'
	import request from '@/utils/request.js';
	export default {
		components: {
			MyRedeem,
			MyDraw,
			MyWinner
		},
		data() {
			return {
				navIndex: -1,
				currentNum: 1,
				total: 0,
				size: 10
			};
		},
		onLoad(options) {
			// 判断是否从抽奖页面跳转过来且需要显示my-winner
			if (options.show === 'winner') {
				this.navIndex = 0; // 设置navIndex为0以显示my-winner组件
			}
		},
		methods: {
			exchangetotal(total) {
				this.total = total
			}, 
			// 下拉加载
			onReachBottom() { 
				if (this.size * this.currentNum >= this.total) {
					uni.showToast({
						title: '数据加载完毕',
						duration: 2000,
						icon: 'none'
					})
				} else {
					this.currentNum += 1;
				}
			},
			// 点击有不同的结果
			changeNav(index) {
				this.currentNum = 1
				this.navIndex = index
			},

		}
	}
</script>

<style lang="scss">
	.containerPage {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;

		.fixed-top {
			position: fixed;
			z-index: 99;
			width: 100%;
		}

		.sort-nav {
			.nav-box {
				display: flex;
				border: 1px solid #eeeeee;
				justify-content: space-around;
				background-color: white;

				.nav-item {
					padding: 20rpx;

					&.activeNav {
						color: deepskyblue;
						border-bottom: 1px solid deepskyblue;
					}

				}
			}

		}

		.order_titleBox {
			// border-bottom: 1px solid #eeeeee;
			color: white;
			padding: 20px;
			border-top: 10rpx solid #eeeeee;
			background-color: deepskyblue;

			.order_titleItem {
				display: flex;
				justify-content: space-between;

			}
		}
	}
</style>